<!DOCTYPE html>
<html>
<head>
<title>Feynman Diagram Redrawing</title>
</head>
<body>
<canvas id="canvas" width="500" height="420" style="background-color: #fff;"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = '18px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Parameters
    const centerX = 250;
    const interactionY = 220;
    const radius = 80;
    const frame = { x: 20, y: 20, width: 460, height: 350 };

    // 1. Draw the outer frame
    ctx.strokeRect(frame.x, frame.y, frame.width, frame.height);

    // 2. Draw the horizontal line (diameters of both semicircles)
    const lineStartX = centerX - 2 * radius;
    const lineEndX = centerX + 2 * radius;
    ctx.beginPath();
    ctx.moveTo(lineStartX, interactionY);
    ctx.lineTo(lineEndX, interactionY);
    ctx.stroke();

    // 3. Draw the incoming gamma ray (wavy line)
    const waveStartY = frame.y + 40;
    const waveEndY = interactionY;
    ctx.beginPath();
    ctx.moveTo(centerX, waveStartY);
    ctx.lineTo(centerX - 8, waveStartY + 24);
    ctx.lineTo(centerX + 8, waveStartY + 48);
    ctx.lineTo(centerX - 8, waveStartY + 72);
    ctx.lineTo(centerX + 8, waveStartY + 96);
    ctx.lineTo(centerX - 8, waveStartY + 120);
    ctx.lineTo(centerX, waveEndY);
    ctx.stroke();

    // 4. Draw the left semicircle (positron track)
    const leftCircleCenterX = centerX - radius;
    ctx.beginPath();
    ctx.arc(leftCircleCenterX, interactionY, radius, 0, Math.PI, false);
    ctx.stroke();

    // 5. Draw the right semicircle (electron track)
    const rightCircleCenterX = centerX + radius;
    ctx.beginPath();
    ctx.arc(rightCircleCenterX, interactionY, radius, 0, Math.PI, false);
    ctx.stroke();

    // 6. Draw the measurement markers, making the lines bold like the original
    // by drawing over existing lines
    // Left marker
    ctx.beginPath();
    // vertical radius line
    ctx.moveTo(leftCircleCenterX, interactionY);
    ctx.lineTo(leftCircleCenterX, interactionY + radius);
    // horizontal line segment on top (part of diameter)
    ctx.moveTo(leftCircleCenterX, interactionY);
    ctx.lineTo(centerX, interactionY);
    ctx.stroke();

    // Right marker
    ctx.beginPath();
    // vertical radius line
    ctx.moveTo(rightCircleCenterX, interactionY);
    ctx.lineTo(rightCircleCenterX, interactionY + radius);
    // horizontal line segment on top (part of diameter)
    ctx.moveTo(centerX, interactionY);
    ctx.lineTo(rightCircleCenterX, interactionY);
    ctx.stroke();

    // 7. Add text labels
    // Gamma label
    ctx.font = 'italic 20px "Times New Roman"';
    ctx.textAlign = 'left';
    ctx.fillText('\u03B3', centerX + 15, waveStartY + 50);

    // Particle labels e+ and e-
    ctx.textBaseline = 'bottom';
    
    // Positron (e+)
    ctx.font = '20px "Times New Roman"';
    ctx.textAlign = 'right';
    ctx.fillText('e', lineStartX - 2, interactionY);
    ctx.font = '14px "Times New Roman"';
    ctx.fillText('+', lineStartX - 2 + 8, interactionY + 1);
    
    // Electron (e-)
    ctx.font = '20px "Times New Roman"';
    ctx.textAlign = 'left';
    ctx.fillText('e', lineEndX + 2, interactionY);
    ctx.font = '14px "Times New Roman"';
    ctx.fillText('-', lineEndX + 2 + 7, interactionY + 1);

    // Reset text alignment and baseline for other labels
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // "3 cm" labels
    ctx.font = '18px "Times New Roman"';
    ctx.fillText('3 cm', leftCircleCenterX + 45, interactionY + 20);
    ctx.fillText('3 cm', rightCircleCenterX - 45, interactionY + 20);

    // Figure caption
    ctx.fillText('Fig. 4.3', centerX, frame.y + frame.height + 25);

</script>
</body>
</html>